import Vue from 'vue'
import Router from 'vue-router'

import Login from '@/components/login/Login'
import Home from '@/views/Home'
import HomeViews from "@/components/homes/HomeViews"
import Commodity from "@/components/homes/Commodity"
import Category from "@/components/homes/Category"
import Userback from "@/components/homes/Userback"
import Order from "@/components/homes/Order"
import Detail from "@/components/detailed/Detail"
import Amend from "@/components/detailed/Amend"

import Administrator from "./Administrator.vue"
import ErrorRouter from "../router/ErrorRouter.vue"
Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/Login',
      name: 'Login',
      component: Login,
      meta: { title: "登录系统" }
    },
    {
      path: '/ErrorRouter',
      name: 'ErrorRouter',
      component: ErrorRouter,
      meta: { title: "404" }
    },
    {
      path: '/Administrator',
      name: 'Administrator',
      component: Administrator,
      meta: { title: "403" }
    },
    {
      path: '/',
      component: Home,
      meta: {
        requtreAuth: true,
        title: "系统首页"
      },
      children: [
        {
          path: '/',
          name: 'HomeViews',
          component: HomeViews,
          meta: { title: "首页", needLogin: true }
        },
        {
          path: '/Commodity',
          name: 'Commodity',
          component: Commodity,
          meta: { title: "商品管理", needLogin: true }
        },
        {
          path: '/Category',
          name: 'Category',
          component: Category,
          meta: { title: "品类管理", needLogin: true }
        },
        {
          path: '/Userback',
          name: 'Userback',
          component: Userback,
          meta: { title: "用户管理", needLogin: true }
        },
        {
          path: '/Order',
          name: 'Order',
          component: Order,
          meta: { title: "订单管理", needLogin: true }
        },
        {
          path: '/Detail',
          name: 'Detail',
          component: Detail,
          meta: { title: "商品详情", needLogin: true }
        },
        {
          path: '/Amend',
          name: 'Amend',
          component: Amend,
          meta: { title: "商品详情" }
        },
      ]
    },
  ],
  // 切换路由时，让页面滚动到顶部
  scrollBehavior(to, from, savedPosition) {
    return {
      x: 0,
      y: 0
    }
  },
  history: true
})


router.beforeEach((to, from, next) => {
  if (to.matched.length === 0) {
    next('/ErrorRouter')
  } else {
    next(); //如果匹配到正确跳转
  }
});

// 路由前置导航守卫
router.beforeEach((to, from, next) => {
  // 根据路由元信息设置文档标题
  window.document.title = to.meta.title || admin
  next()
})

router.beforeEach((to, from, next) => {
  // console.log("路有钩子跳转")
  // document.title = `Mmail后端管理系统 | ${to.meta.title}`;
  const role = localStorage.getItem('admin');
  if (!role && to.path !== '/Login') {
    next('/Login');
  } else if (to.meta.needLogin) {
    //     // 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
    role === 'admin' ? next() : next('/Administrator');  //到403
  } else if (to.matched.length === 0) {
    next('/ErrorRouter');  //没有匹配到到404页面
    // from.name ? next({
    //   name: from.name
    // }) : next('/404');
  }else{
    next()
  }

  // else {
  //   // 简单的判断IE10及以下不进入富文本编辑器，该组件不兼容
  //   if (navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/edit') {
  //     Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器，请使用更高版本的浏览器查看', '浏览器不兼容通知', {
  //       confirmButtonText: '确定'
  //     });
  //   } else {
  //     next();
  //   }
  // }
});
export default router;
